<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动详情',
  },
}
</route>

<template>
  <view class="activity-detail common-detail-container">
    <view
      v-if="swiperList?.length"
      class="swiper-wrap common-detail-info-header"
    >
      <!-- <wd-swiper
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' }"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper> -->
      <LtSwiper :swiper-list="swiperList"></LtSwiper>
    </view>
    <view class="common-detail-info-body">
      <view class="detail-info-title">
        <view class="detail-info-title__line"></view>
        <text>{{ detail?.name }}</text>
      </view>
      <view
        class="detail-info-desc"
        v-if="detail.note"
      >
        {{ detail.note }}
      </view>
      <view class="detail-info-others">
        <view class="others-line"></view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="home"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">活动礼堂</view>
          </view>
          <view class="others-item__value">{{ detail?.hallId_dictText }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="location"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">镇(街)</view>
          </view>
          <view class="others-item__value">
            {{ detail?.sysOrgCode_dictText }}
          </view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="user"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">申报人</view>
          </view>
          <view class="others-item__value">{{ detail?.userId_dictText }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="time"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">活动日期</view>
          </view>
          <view class="others-item__value">{{ detail?.date }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="note"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">活动类型</view>
          </view>
          <view class="others-item__value">{{ detail?.type_dictText }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="usergroup"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">预计参与人数</view>
          </view>
          <view class="others-item__value">
            {{ detail?.expectPayerNumber }}
          </view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="money-circle"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">预计费用</view>
          </view>
          <view class="others-item__value">{{ detail?.expectFee }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="location"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">地址</view>
          </view>
          <view class="others-item__value">{{ detail?.address }}</view>
        </view>
        <view class="others-item block">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="spool"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">安全预案</view>
          </view>
          <view class="others-item__value">{{ detail?.safeNote }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="time"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">实际活动时长(小时)</view>
          </view>
          <view class="others-item__value">{{ detail?.actualDuration }}</view>
        </view>
        <view class="others-item">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="usergroup"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">实际参与人数</view>
          </view>
          <view class="others-item__value">
            {{ detail?.actualPayerNumber }}
          </view>
        </view>
        <view class="others-item block">
          <view class="others-item__label">
            <view class="others-item__label-icon">
              <wd-icon
                name="camera"
                size="28rpx"
              ></wd-icon>
            </view>
            <view class="others-item__label-text">现场媒资</view>
          </view>
          <!-- <view class="others-item__value">{{ detail?.actualPayerNumber }}</view> -->
          <view class="media-img-wrapper">
            <wd-img
              custom-class="media-img"
              v-for="item in formattedLiveUrl"
              :key="item"
              :width="50"
              :height="50"
              :src="item"
              mode="aspectFill"
              :enable-preview="true"
            />
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="detail-info">
      <view class="detail-info-title">{{ detail.name }}</view>
      <view class="detail-info-item">
        <wd-icon name="time" size="20px"></wd-icon>
        <text class="item-label">活动时间</text>
        <text class="item-value">{{ detail.date }}</text>
      </view>
      <view class="detail-info-item">
        <wd-icon name="home" size="20px"></wd-icon>
        <text class="item-label">活动礼堂</text>
        <text class="item-value">{{ detail.hallId_dictText }}</text>
      </view>
    </view>
    <view class="detail-desc">
      {{ detail.note }}
    </view> -->
    <button
      class="common-share-btn"
      open-type="share"
    >
      <!-- <wd-icon name="share" size="18px"></wd-icon> -->
      <image
        class="share-icon"
        src="@/static/icons/share.svg"
      ></image>
      分享好友
    </button>
  </view>
</template>

<script setup>
import LtSwiper from '@/components/LtSwiper.vue'
import ActivityApi from '@/service/activity'
import { currRoute, uniNavigateTo, formatUrlString } from '@/utils/index'

const swiperList = ref([])

const detail = ref({
  id: 0,
  name: '',
  date: '',
  address: '',
  note: '',
})
const getDetail = async (id) => {
  const { code, result } = await ActivityApi.getActivityDetail(id)
  if (code === 200 && result) {
    swiperList.value = formatUrlString(result.coverUrl, false)
    detail.value = { ...result }
  }
}

const formattedLiveUrl = computed(() => {
  return formatUrlString(detail.value.liveUrl, false)
})

onLoad((options) => {
  getDetail(options.id)
})

onShareAppMessage(() => {
  console.log('currRoute', currRoute())
  const { path, query } = currRoute()
  const sharePath = `${path}?id=${query.id}`
  return {
    title: detail.value.name,
    path: sharePath,
  }
})
</script>

<style lang="scss" scoped>
.activity-detail {
  position: relative;
  height: 100vh;
}

.swiper-wrap {
  :deep() .wd-swiper {
    &__track {
      border-radius: 0;
    }
  }

  :deep() .home-banner {
    height: 400rpx;
    height: 56.25vw; // 16 / 9比例
  }
}

.media-img-wrapper {
  text-align: left;

  :deep() .media-img {
    margin-right: $uni-spacing-row-sm;
    margin-bottom: $uni-spacing-col-sm;
  }
}

// .detail-info {
//   position: relative;
//   padding: $uni-spacing-col-lg $uni-spacing-row-lg;

//   &-title {
//     width: 80%;
//     margin-bottom: $uni-spacing-col-lg;
//     font-size: $uni-font-size-title;
//     font-weight: 700;
//   }

//   &-item {
//     display: flex;
//     align-items: center;
//     margin-bottom: $uni-spacing-col-base;
//     font-weight: 600;

//     :deep() .wd-icon {
//       margin-right: $uni-spacing-row-sm;
//     }

//     .item-label {
//       margin-right: $uni-spacing-row-sm;
//     }

//     .item-value {
//       color: $uni-color-primary;
//     }
//   }

//   &-map {
//     position: absolute;
//     top: 50%;
//     right: 20px;
//     transform: translateY(-50%);
//   }
// }

// .detail-desc {
//   padding: 0 $uni-spacing-row-lg;
//   font-size: $uni-font-size-base;
//   line-height: 1.5;
//   color: $uni-text-color-grey;
//   text-indent: 28px;
//   letter-spacing: 0.75px;
// }
</style>
